<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{common/top :: head}">
    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="../css/mystore.css">
</head>
<body>
<div th:replace="~{common/top}"></div>
<div th:fragment="accountFields">
    <h3>Account Information</h3>

    <div class="BackLink">
        <a th:href="@{/cart}"><i class="fa-solid fa-chevron-left"></i>Get to My Cart</a>
    </div>


    <form th:action="@{/account/updateaccount}" method="post" th:object="${loginAccount}">
        <div class="Catalog">
            <table>
                <tr>
                    <td>First name:</td>
                    <td>
                        <input type="text" th:field="*{firstName}" name="firstName" class="search-input">
                        <div id="first_name_feedback"></div>
                    </td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td>
                        <input type="text" th:field="*{lastName}"  name="lastName" class="search-input">
                    </td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td>
                        <input type="text" size="40" th:field="*{email}"  name="email" class="search-input">
                    </td>
                </tr>
            </table>


        <h3>Profile Information</h3>

            <table>
                <tr>
                    <td>Language Preference:</td>
                    <td>
                        <input type="radio" name="languagePreference" th:field="*{languagePreference}" value="english">English
                        <input type="radio" name="languagePreference" th:field="*{languagePreference}" value="chinese">Chinese
                    </td>
                </tr>
                <tr>
                    <td>Favourite Category:</td>
                    <td>
                        <input type="radio" name="favouriteCategoryId" th:field="*{favouriteCategoryId}" value="CATS">CATS
                        <input type="radio" name="favouriteCategoryId" th:field="*{favouriteCategoryId}" value="DOGS">DOGS
                        <input type="radio" name="favouriteCategoryId" th:field="*{favouriteCategoryId}" value="FISH">FISH
                        <input type="radio" name="favouriteCategoryId" th:field="*{favouriteCategoryId}" value="BIRDS">BIRDS
                        <input type="radio" name="favouriteCategoryId" th:field="*{favouriteCategoryId}" value="REPTILES">REPTILES
                    </td>
                </tr>
                <tr>
                    <td>Enable MyList</td>
                    <td><input type="checkbox" th:field="*{listOption}"  name="listOption"/></td>
                </tr>
                <tr>
                    <td>Enable MyBanner</td>
                    <td><input type="checkbox" th:field="*{bannerOption}"  name="bannerOption"/></td>
                </tr>
            </table>
        </div>

        <button type="submit" class="btn">Update Account</button>
    </form>
</div>
<footer th:replace="~{common/bottom}"></footer>
</body>
</html>
